/*------------------------------------*\
    $FORMS
\*------------------------------------*/
/**
 * Basic textfield structural styling. 
 * 
 * Designed and built @kurenn  
 */

form {
  margin: 0 0 $base-line-height;
}

//Labels
label {
  display: block;
  margin-bottom: 5px;
  cursor: pointer;
}

//Inputs
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  display: inline-block;
  height: $base-line-height;
  padding: 4px 6px;
  margin-bottom: $base-line-height / 2;
  font-size: $base-font-size;
  line-height: $base-line-height;
  color: $input-color;
  @include border-radius($input-border-radius);
  vertical-align: middle;
}

//Reset textarea height because of the rows
textarea {
  height: auto;
}

//Text inputs
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  background-color: $input-bg;
  border: 1px solid $input-border-color;

  /*Focus state*/
  &:focus {
    border-color: rgba($input-focus-color,.8);
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    @include single-transition(border, 0.2s, linear)
  }
}

//Input sizes
.input-mini { 
  width: 60px; 
}

.input-small { 
  width: 90px; 
}

.input-medium { 
  width: 150px; 
}

.input-large { 
  width: 210px; 
}

.input-xlarge {
  width: 270px; 
}

.input-xxlarge { 
  width: 350px; 
}

/* Inline Forms */
/* ------------ */
.inline-form,
.horizontal-form {
  input,
  textarea,
  select {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }

  label {
    display: inline-block;
  }

  // Re-hide hidden elements due to specifity
  .hide {
    display: none;
  }
}

/* Horizontal form */
/* --------------- */
.horizontal-form {
  .furatto-controls {
    display: block;
    margin-bottom: 10px;

    label {
      width: 160px;
      margin-right: 20px;
      text-align: right;
    }
  }

  .furatto-actions {
    margin-left: 184px;
  }
}

/* Login Form */
/* ------------ */
.login-form {
  width: 30%;
  text-align: center;

  input[type="text"],
  input[type="password"],
  input[type="email"] {
    display: block;
    width: 96%;
    height: 35px;
    padding: 0px 0px 0px 10px;
    height: 42px;
    background: #fcfcfc;
  }

  .furatto-login-icon {
    margin-bottom: 20px;
  }

  .login-header {
    font-size: $base-font-size + 10;
    margin: 0;
    color: $dark-gray;
  }
}

/* Centered forms */
/* -------------- */
.centered-form {
  margin: 0 auto;
}

/* Level up the label on for checkboxes */
/* ------------------------------------ */
label.checkbox-label {
  display: inline-block;
  position: relative;
  top: -4px;
  margin-left: 5px;
  margin-right: 5px;
}

label.radiobutton-label {
  @extend .checkbox-label;
}

label {
  @include touch-callout;
}

/* Uneditable inputs */
/* ----------------- */

input[disabled],
textarea[disabled] {
  color: $light-gray;
  cursor: not-allowed;
  overflow: hidden;
  white-space: nowrap;
  background: #EEE;
}

/* Input states */
/* ------------ */
.info {
  textarea,
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"] {
    color: $dark-blue;
    border: 1px solid $dark-blue;
  }
}
.success{
  textarea,
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"]  {
    color: $dark-green;
    border: 1px solid $dark-green;
  }
}
.warning{
  textarea,
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"]  {
    color: $dark-orange;
    border: 1px solid $dark-orange;
  }
}
.error{
   textarea,
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"]  {
    color: $dark-red;
    border: 1px solid $dark-red;
  }
}
